<template>
  <div class="container">
    <div class="table-wrap">
      <div class="table">
        <div class="tab">
          <span class="sort">序号</span>
          <span class="shanghu">商户</span>
          <span class="hao">摊位号</span>
          <span class="fanwei">经营范围</span>
          <span class="dengji">信用评级</span>
          <span class="num">评价次数</span>
        </div>
        <el-scrollbar
          element-loading-background="transparent"
          v-loading="loading"
        >
          <div class="item-wrap">
            <div v-for="(item, index) in tabList" :key="index" class="item">
              <span class="sort">{{ index + 1 }}</span>
              <span class="shanghu">{{ item.name }}</span>
              <span class="hao">{{ item.twhname }}</span>
              <span class="fanwei">{{ item.jyfw }}</span>
              <span class="dengji">
                <img
                  v-for="i in item.xydj"
                  :key="i"
                  src="@img/cxgs/cxgs_13.png"
                  alt=""
                />
                <img
                  v-for="i in 5 - item.xydj"
                  :key="i"
                  src="@img/cxgs/cxgs_10.png"
                  alt=""
                />
              </span>
              <span class="num">{{ item.pjcs }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getCXGSByMarket, getCXGSDetailByMarket } from "@/apis/subjectInfo";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const boyUrl = ref("src/assets/images/ztxx/boy.png");
const girlUrl = ref("src/assets/images/ztxx/girl.png");
let loading = ref(false);
const tabList = ref();
const getInfo = () => {
  loading.value = true;
  getCXGSDetailByMarket(route.query.id).then((res) => {
    tabList.value = res.data;
    loading.value = false;
  });
};
getInfo();

const handleDetail = (id) => {
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .table-wrap {
    padding-top: 20px;
    .table {
      .tab {
        height: 40px;
        line-height: 40px;
        background: #4cc1ef;
        border-top-left-radius: 23px;
        border-top-right-radius: 23px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        color: #fff;
        font-size: 15px;

        span {
          position: relative;
          display: inline-block;
        }
        .sort {
          left: 5px;
        }
        .shanghu {
          left: 10px;
        }
        .hao {
          left: 17px;
        }
        .fanwei {
          left: 22px;
        }
        .dengji {
          left: 12px;
          img {
            width: 16px;
          }
        }
        .num {
        }
        .detail {
        }
      }
      .item-wrap {
        height: 400px;
      }
      .el-scrollbar {
        height: 100%;
      }
      .item {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        padding: 0 25px;
        color: #000;
        font-size: 15px;
        background: #c0edff;
        &:nth-child(2n-1) {
          background: #fff;
        }
        span {
          display: inline-block;
          font-size: 12px;
          position: relative;
        }
        .sort {
          left: -7px;
          width: 14px;
          text-align: center;
        }
        .shanghu {
          left: 15px;
          width: 50px;
          text-align: center;
        }
        .fanwei {
          font-size: 10px;
          width: 60px;
          left: -20px;
          word-wrap: break-word;
          line-height: normal;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden; /* 超出容器宽度的内容隐藏 */
          text-overflow: ellipsis; /* 内容超出时显示省略号 */
        }
        .hao {
          width: 110px;
          text-align: center;
          left: -7px;
          word-wrap: break-word;
          line-height: normal;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden; /* 超出容器宽度的内容隐藏 */
          text-overflow: ellipsis; /* 内容超出时显示省略号 */
        }
        .dengji {
          left: -24px;
          text-align: center;
          img {
            width: 16px;
          }
        }
        .num {
          left: -10px;
        }
        .detail {
          line-height: 50px;
          img {
            height: 21px;
          }
        }
      }
    }
  }
}
</style>
